<template>
  <div>
    <div class="search">
        <!-- <el-date-picker
          v-model="value"
          type="datetimerange"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          placeholder="选择时间范围"
          default-time="['8:30:00', '08:29:00']">
        </el-date-picker> -->
        <el-form v-model="searchList">
             <label>开始时间:</label>
              <el-date-picker
                v-model="startDate"
                type="datetime"
                placeholder="选择日期时间">
              </el-date-picker>
              <label>结束时间:</label>
              <el-date-picker
                v-model="endDate"
                type="datetime"
                placeholder="选择日期时间">
              </el-date-picker>
      <el-button @click="handleClickSearch" v-loading.fullscreen.lock="fullscreenLoading">查询</el-button>
      </el-form>
    </div>

    <highcharts :options="options"  ref="highCharts" :style="{height:tableHeight+'px'}"></highcharts>
  </div>
</template>
<script>
import * as MaterialBa from "@/api/report/materialBalance";
var moment = require('moment');
var Highcharts = require('highcharts');
export default {
  name: 'defectDistribution',  //成品缺陷分布
  data () {
    return {
      // value:[],
      startDate: '',
      endDate: '',
      fullscreenLoading:false,
      search:{ startDate:'', endDate:'' },
      searchList:{startDate:'', endDate:''},
      options: {
    chart: {
        type: 'bar'
    },
    title: {
        text: '物料平衡图表--晶棒',
        style: {
                color: '#000',
                fontSize: "40px",
                fontWeight: "blod"
            }
    },
    subtitle: {
        // text: '数据来源: Wikipedia.org'
        style: {
                color: '#606266',
                fontSize: "20px",
                fontWeight: "blod"
            }
    },
    xAxis: {
        categories: ['入场检验', '粘棒', '固化', '线切', '脱胶','插片','清洗','分选','检验'],
        title: {
            text: null
        }
    },
    yAxis: {
        min: 0,
        title: {
            // text: '',
            align: 'high'
        },
        labels: {
            overflow: 'justify'
        }
    },
    tooltip: {
        valueSuffix: ' 根'
    },
    plotOptions: {
        bar: {
            dataLabels: {
                enabled: true,
                allowOverlap: true // 允许数据标签重叠
            }
        }
    },
    legend: {
        layout: 'vertical',
        align: 'right',
        verticalAlign: 'top',
        x: -40,
        y: 100,
        floating: true,
        borderWidth: 1,
        backgroundColor: ((Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'),
        shadow: true
    },
    series: [{
              name:'数量',
              colorByPoint : true
              // data: [107, 31, 635, 203, 2,7,8,9,2]
          }]

      }
    }
  },

  computed: {
      tableHeight () {
          const filterHeight = 0
          var tableHeight = this.getTableHeight(filterHeight)+28
          return tableHeight;
      }
  },
  methods: {
    handleClickSearch () {
      // this.search.startDate = moment(this.value[0]).format('YYYY-MM-DD HH:mm:ss');
      // this.search.endDate = moment(this.value[1]).format('YYYY-MM-DD HH:mm:ss');
      // this.fetchDate(this.search)
      // console.log('llee',this.search)
      if( !this.startDate == ''){
        this.searchList.startDate = moment(this.startDate).format('YYYY-MM-DD HH:mm:ss');
      }else{
        this.searchList.startDate = ''
      }
      if(!this.endDate == ''){
        this.searchList.endDate = moment(this.endDate).format('YYYY-MM-DD HH:mm:ss');
      }else{
        this.searchList.endDate = ''
      }
      this.fetchDate()
      this.fullscreenLoading = true
    },
    fetchDate () {
        this.search.startDate = moment(this.searchList.startDate).format('YYYY-MM-DD HH:mm:ss');
        this.search.endDate = moment(this.searchList.endDate).format('YYYY-MM-DD HH:mm:ss');
        MaterialBa.getMaterielBalance(this.search).then(res => {
           this.fullscreenLoading = false
            console.log('res',res)
            const leemsg = [res[0].inspectNum,
                            res[0].stickNum,
                            res[0].solidifyNum,
                            res[0].wireNum,
                            res[0].degumNum,
                            res[0].cpNum,
                            res[0].qxNum,
                            res[0].sorterNum,
                            res[0].finaltestNum
                            ]
              this.$refs.highCharts.chart.update({
                    series:[{
                      data: leemsg
                    }],
                    subtitle:{
                      text: '查询开始时间:'+this.search.startDate + ' -  查询结束时间:' +this.search.endDate
                    }

	            })



        })
    }
  },
  mounted () {
    // var day = new Date()
    // var today = moment(day).format('YYYY-MM-DD HH:mm:ss');
    // var yesterday = moment(day.setTime(day.getTime()- 24*60*60*1000)).format('YYYY-MM-DD HH:mm:ss');
    // console.log('今天',today)
    // console.log('昨天',yesterday)
    // this.fetchDate({startDate:yesterday,endDate:today})
    this.startDate = moment.utc(moment().subtract(9, 'days').format('YYYY-MM-DD 00:30:00')).format();
    this.endDate = moment.utc(moment().format('YYYY-MM-DD 00:30:00')).format();
   /* this.searchList.startDate = moment().subtract(9, 'days').format('YYYY-MM-DD 08:30:00');
    this.searchList.endDate = moment().format('YYYY-MM-DD 08:30:00');*/
    this.handleClickSearch();
    // this.messagel();
  }
}
</script>
<style scoped>
.search{
  margin-top:20px;
  margin-left: 20px;
}
</style>
